<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import HairReColor from './hairReColor.vue'
import FaceBeauty from './faceBeauty.vue'
import ConvertToAnime from './convertToAnime.vue'

const currentType = ref('hairReColor') // 默认

const setType = (type: string) => {
  if (type === 'hairReColor' || type === 'faceBeauty' || type === 'convertToAnime') {
    currentType.value = type
    uni.setStorageSync('appType', type)
  }
}

onMounted(() => {
  // 事件方式
  if (uni.$on) {
    uni.$on('switch-app-type', setType)
  }
  // 页面切换时恢复
  const cacheType = uni.getStorageSync('appType')
  if (cacheType) setType(cacheType)
})
onUnmounted(() => {
  if (uni.$off) {
    uni.$off('switch-app-type', setType)
  }
})
</script>

<template>
  <view>
    <HairReColor v-if="currentType === 'hairReColor'" />
    <FaceBeauty v-else-if="currentType === 'faceBeauty'" />
    <ConvertToAnime v-else-if="currentType === 'convertToAnime'" />
  </view>
</template>

<style lang="scss">
//
</style>
